<template>
  <div class="welcome">
    <el-affix>
      <div class="top-content">
        <div class="left-mark">
          <img
            :src="favicon"
            title="avatar"
            alt
          />
          <span>{{ greetings }}</span>
        </div>
        <Flop v-if="!mobile" />
      </div>
    </el-affix>

    <!-- 图表 -->
    <el-card class="box-card">
      <div class="content">
        <div class="content_container">
          <p class="content_container_text">
            Hello
          </p>

          <ul class="content_container_list">
            <li class="content_container_list_item">world !</li>
            <li class="content_container_list_item">friends !</li>
            <li class="content_container_list_item">users !</li>
            <li class="content_container_list_item">everybody !</li>
          </ul>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script lang='ts'>
import Flop from "/@/components/Flop";
import { ref, computed } from "vue";
import { deviceDetection } from "/@/utils/deviceDetection";
import favicon from '/favicon.ico'

let brokenLine: any = null; //折线图实例
export default {
  name: "welcome",
  components: {
    Flop
  },
  setup() {
    let mobile = ref(deviceDetection());
    let date: Date = new Date();
    let greetings = computed(() => {
      if (date.getHours() >= 0 && date.getHours() < 12) {
        return "上午阳光明媚，祝你薪水翻倍🌞！";
      } else if (date.getHours() >= 12 && date.getHours() < 18) {
        return "下午小风娇好，愿你青春不老😃！";
      } else {
        return "折一根天使羽毛，愿拂去您的疲惫烦恼忧伤🌛！";
      }
    });
    return {
      favicon,
      greetings,
      mobile,
    };
  }
};
</script>

<style lang="scss" scoped>
.welcome {
  width: 100%;
  height: 100%;
  margin-top: 1px;
  .top-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 120px;
    background: #fff;
    padding: 20px;
    border-bottom: 0.5px solid rgba($color: #ccc, $alpha: 0.3);
    .left-mark {
      display: flex;
      align-items: center;
      img {
        display: block;
        width: 72px;
        height: 72px;
        border-radius: 50%;
        margin-right: 10px;
        cursor: pointer;
      }
    }
  }
  .box-card {
    width: 80vw;
    height: 60vh;
    margin: 10px auto;
    position: relative;
    background: aliceblue;

    .content {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      height: 160px;
      overflow: hidden;
      font-family: "Lato", sans-serif;
      font-size: 35px;
      line-height: 40px;
      color: #3664ee;
    }

    .content_container {
      font-weight: 600;
      overflow: hidden;
      height: 40px;
      padding: 0 40px;
    }

    .content_container:before {
      content: "[";
      left: 0;
    }

    .content_container:after {
      content: "]";
      position: absolute;
      right: 0;
    }

    .content_container:before, .content_container:after {
      position: absolute;
      top: 0;
      color: #3664ee;
      font-size: 42px;
      line-height: 40px;
      -webkit-animation-name: opacity;
      animation-name: opacity;
      -webkit-animation-duration: 2s;
      animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }

    .content_container_text {
      display: inline;
      float: left;
      margin: 0;
    }

    .content_container_list {
      margin-top: 0;
      padding-left: 110px;
      text-align: left;
      list-style: none;
      -webkit-animation-name: change;
      animation-name: change;
      -webkit-animation-duration: 10s;
      animation-duration: 10s;
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
    }

    .content_container_list_item {
      line-height: 40px;
      margin: 0;
    }

    @-webkit-keyframes opacity {
      0%, 100% {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }
    }

    @keyframes opacity {
      0%, 100% {
        opacity: 0;
      }

      50% {
        opacity: 1;
      }
    }

    @-webkit-keyframes change {
      0%, 12.66%, 100% {
        transform: translate3d(0, 0, 0);
      }

      16.66%, 29.32% {
        transform: translate3d(0, -25%, 0);
      }

      33.32%, 45.98% {
        transform: translate3d(0, -50%, 0);
      }

      49.98%, 62.64% {
        transform: translate3d(0, -75%, 0);
      }

      66.64%, 79.3% {
        transform: translate3d(0, -50%, 0);
      }

      83.3%, 95.96% {
        transform: translate3d(0, -25%, 0);
      }
    }

    @keyframes change {
      0%, 12.66%, 100% {
        transform: translate3d(0, 0, 0);
      }

      16.66%, 29.32% {
        transform: translate3d(0, -25%, 0);
      }

      33.32%, 45.98% {
        transform: translate3d(0, -50%, 0);
      }

      49.98%, 62.64% {
        transform: translate3d(0, -75%, 0);
      }

      66.64%, 79.3% {
        transform: translate3d(0, -50%, 0);
      }

      83.3%, 95.96% {
        transform: translate3d(0, -25%, 0);
      }
    }

  }

}
</style>
